<template>
  <div class="sz-login">
    <!-- 登录组件 -->
    <template v-if="curModule === MODULE_ENUM.LOGIN">
      <div>
        <Login
          v-bind="$props"
          :tabs="actionList"
          :platform="platform"
          :setCookie="setCookie"
          :imgCaptchaInfo="{ captcha, verifyKey }"
          @openDialog="openDialog"
          @closeDialog="closeDialog"
          @success="loginSuccess"
          @failed="loginFailed"
        />
        <div class="footerAction">
          <div class="left"><slot name="bottomAction"></slot></div>
          <el-button
            v-if="showResetPassword"
            type="text"
            class="right"
            @click="curModule = MODULE_ENUM.RESET_PASSWORD"
            >忘记密码？</el-button
          >
        </div>
      </div>
    </template>
    <template v-else>
      <div>
        <div class="return" @click="curModule = MODULE_ENUM.LOGIN">
          <i class="el-icon-arrow-left"></i>
          <span class="text">返回</span>
        </div>
        <div>
          <!-- 固定内置页面 -->
          <ResetPassword
            v-bind="$props"
            v-if="curModule === MODULE_ENUM.RESET_PASSWORD"
            :imgCaptchaInfo="{ captcha, verifyKey }"
            @openDialog="openDialog"
            @closeDialog="closeDialog"
            @reset="reset"
          />
          <!-- 插入内置页面 -->
          <template v-else>
            <slot :name="`insidePage${curModule}`"></slot>
          </template>
        </div>
      </div>
    </template>

    <VerifyDialog v-bind="$props" :isVisible="dialogVisible" @close="getCaptcha" />
  </div>
</template>

<script>
import Login from "./login.vue";
import ResetPassword from "./reset.vue";
import VerifyDialog from "./verifyDialog.vue";
import { LOGIN_ACTION } from "@/utils/enum.js";

const MODULE_ENUM = {
  LOGIN: "Login",
  RESET_PASSWORD: "ResetPassword"
};

export default {
  name: "SzLogin",
  components: { Login, ResetPassword, VerifyDialog },
  props: {
    actionList: {
      type: Array,
      default: () => [LOGIN_ACTION.ACCOUNT]
    },
    platform: {
      type: String,
      default: "",
      required: true
    },
    // 是否展示忘记密码
    showResetPassword: {
      type: Boolean,
      default: true
    },
    // 是否设置cookie
    setCookie: {
      type: Boolean,
      default: true
    },
    // 自定义域名，适配本地部署
    customApi: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      MODULE_ENUM,
      curModule: MODULE_ENUM.LOGIN,
      dialogVisible: false,
      captcha: "", // 用户填写的图片验证码
      verifyKey: ""
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    getCaptcha(captcha, verifyKey) {
      if (captcha) {
        this.captcha = captcha;
        this.verifyKey = verifyKey;
      } else {
        this.captcha = "";
        this.verifyKey = "";
        this.closeDialog();
      }
    },
    loginSuccess(action, result, data) {
      this.$emit("loginSuccess", action, result, data);
    },
    loginFailed(action, result, data) {
      this.$emit("loginFailed", action, result, data);
    },
    reset(data) {
      this.$emit("reset", data);
    }
  }
};
</script>

<style lang="scss" scoped>
.sz-login {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
  width: 460px;
  min-height: 420px;
  box-sizing: border-box;
  padding: 40px;
  position: relative;

  .return {
    display: flex;
    align-content: center;
    cursor: pointer;
    position: absolute;
    top: 20px;
    left: 20px;
    i {
      font-size: 18px;
      color: #606266;
    }
    .text {
      color: #666666;
      font-size: 14px;
      font-weight: 400;
    }
  }

  .footerAction {
    position: absolute;
    bottom: 28px;
    width: calc(100% - 80px);
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .right {
      color: #909399;
    }
  }

  ::v-deep .el-dialog__wrapper {
    position: absolute !important;
  }
  ::v-deep .v-modal {
    position: absolute !important;
  }
}
</style>
